import { login, getUserInfo, getUserDetailById } from "@/api/user";
import { getToken, setToken, removeToken, setTimeStamp } from "@/utils/auth";
import { resetRouter } from "@/router";

//状态

const state = {
  token: getToken(), // 设置token初始状态   token持久化 => 放到缓存中
  userInfo: {},
  setToken,
  removeToken,
  // token: null,
};
//修改状态
const mutations = {
  setToken(state, token) {
    state.token = token; // 设置token  只是修改state的数据

    setToken(token); // vuex和 缓存数据的同步
  },
  removeToken(state) {
    state.token = null;
    removeToken(); // 先清除 vuex  再清除缓存 vuex和 缓存数据的同步
  },
  //设置用户信息
  setUserInfo(state, userInfo) {
    state.userInfo = { ...userInfo }; // 用 浅拷贝的方式去赋值对象 因为这样数据更新之后，才会触发组件的更新
  },
  //删除用户信息
  removeUserInfo(state) {
    state.userInfo = {};
  },
};
//执行异步
const actions = {
  async login(context, data) {
    // 经过响应拦截器的处理之后 这里的result实际上就是 token
    const result = await login(data);
    // actions 修改state 必须通过mutations
    context.commit("setToken", result); //提交mutations设置token
    // 写入时间戳
    setTimeStamp(); // 将当前的最新时间写入缓存

  },
  //获取用户资料action
  async getUserInfo(context) {
    const result = await getUserInfo(); // result就是用户的基本资料
    const baseInfo = await getUserDetailById(result.userId); // 为了获取头像
    const baseResult = { ...result, ...baseInfo }; // 将两个接口结果合并
    context.commit("setUserInfo", baseResult); // 提交mutations
    // 加一个点睛之笔  这里这一步，暂时用不到，但是请注意，这给我们后边会留下伏笔
    console.log(baseResult);
    return baseResult;
  },
  // 登出action
  logout(context) {
    // 先删除token
    context.commit("removeToken");
    //再删除用户资料
    context.commit("removeUserInfo");
    //重置路由
    resetRouter();
    // 还有一步  vuex中的数据是不是还在
    // 要清空permission模块下的state数据
    // vuex中 user子模块  permission子模块
    // 子模块调用子模块的action  默认情况下 子模块的context是子模块的
    // 父模块 调用 子模块的action
    context.commit("permission/setRoutes", [], { root: true });
    // 子模块调用子模块的action 可以将commit的第三个参数 设置成  { root: true } 就表示当前的context不是子模块了 而是父模块
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};
